.button-variant(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;

  // #gradient > .vertical(@start-color: @background; @end-color: darken(@background, 15%));

  &:hover {
    background-color: darken(@background, 10%);
    background-position: 0 -15px;
  }
  &:active {
    background-image: none;
    background-color: darken(@background, 15%);
    border-color:transparent;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
  }
}

// Button sizes
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
  padding: @padding-vertical @padding-horizontal;
  font-size: @font-size;
  line-height: @line-height;
  border-radius: @border-radius;
}


.btn{
  outline: none;
  display: inline-block;
  margin-bottom: 0; // For input.btn
  font-weight: @btn-font-weight;
  text-align: center;  &.rounded{
    height: 25px;
    line-height: 15px;
    filter:none;
    background-image: none;
    border-radius: 20px;
  }

  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  height: 30px;

  &.disabled,&[disabled]{
    .opacity(.6); 
    cursor: not-allowed;
  }

  &.hollow{
    color:#fff;
    background-color: transparent;
    border-color:lighten(@gray-light,10%);
  }  

  .button-size(4px,15px,14px,@line-height-base,@btn-border-radius-base);

  &.btn-default{
      .button-variant(@gray; @btn-default-bg; @btn-default-border);
  }

  &.btn-primary{
      .button-variant(#fff; @btn-primary-bg; @btn-primary-border);
  }

  &.btn-warning{
      .button-variant(#fff; @btn-warning-bg; @btn-warning-border);
  }  

  &.btn-sm{
      height: auto;
      .button-size(2px,10px,13px,@line-height-base,@btn-border-radius-base);
  }

  &.btn-xs{
      height: auto;
      .button-size(1px,5px,12px,@line-height-base,@btn-border-radius-base);
  }
  &.btn-xxs{
      height: auto;
      .button-size(1px,5px,12px,16px,@btn-border-radius-base);
  }

  &.btn-lg{
      height: auto;
      .button-size(10px,20px,20px,@line-height-base,@btn-border-radius-base);
  }

  &.btn-block{
      display: block;
      width: 100%;
  }

  &.rounded{
    height: 25px;
    line-height: 15px;
    filter:none;
    background-image: none;
    border-radius: 20px;
  }


}
